<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>课程</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/statics/css/csspuls/index.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/statics/styles/common.css" />
    <link rel="stylesheet" href="${pageContext.request.contextPath}/statics/styles/index.css" />
    <link rel="stylesheet" href="${pageContext.request.contextPath}/statics/styles/icon/iconfont.css" />
    <link rel="stylesheet" href="${pageContext.request.contextPath}/statics/css/animate.min.css">
    <style>
        .userInfo{
            width:400px ;
            height:500px;
            margin-top:20px;
            margin-left:40px;
        }
        .userUpdate{
            width:700px ;
            height:500px;
            margin-top:20px;
            margin-left:40px;
        }
        .box-card {
         border-radius:15px;
        }
        .userTask{
            margin-top: 20px;
            width:400px ;
            height:250px;
            margin-left:40px;
        }

    </style>


<body>
<div class="app" id="app">
    <div style="margin: 20px" class="animate__fadeInRight animate__animated">
        <el-table :data="pagination.list" style="width: 100%">
            <el-table-column type="expand">
                <template slot-scope="props">
                    <el-form label-position="left" inline class="demo-table-expand">
                        <el-form-item label="课程名称">
                            <span>{{ props.row.lesson_name }}</span>
                        </el-form-item>
                        <el-form-item label="课程价格:">
                            <span>{{ props.row.lesson_price }}</span>
                        </el-form-item>
                        <el-form-item label="课程简介:">
                            <span>{{ props.row.lesson_discription}}</span>
                        </el-form-item>
                        <el-form-item label="课程状态:">
                            <span>{{ props.row.lesson_status }}</span>
                        </el-form-item>
                    </el-form>
                </template>
            </el-table-column>
            <el-table-column label="编号" prop="id"></el-table-column>
            <el-table-column label="课程名称" prop="lesson_name"></el-table-column>
            <el-table-column prop="topicChooseStatus" label="操作">
                <template slot-scope="props">
                    <el-button type="primary" round
                               :type="props.row.choose === '已选择' ? '' : 'primary'"
                               :disabled="props.row.choose === '已选择' ? true : false"
                               @click="addCourseToUser(props.row.id)">{{props.row.choose}}</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
                background
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="pagination.pageNum"
                :page-sizes="[5, 10, 15, 20]"
                :page-size="pagination.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="pagination.total">
        </el-pagination>
    </div>
</div>


<script src="${pageContext.request.contextPath}/statics/js/jquery.min.js"></script>
<script src="${pageContext.request.contextPath}/statics/js/jquery-3.6.0.js"></script>
<script src="${pageContext.request.contextPath}/statics/js/vue-2.6.12.js"></script>
<script src="${pageContext.request.contextPath}/statics/js/axios-0.20.0.js"></script>
<script src="${pageContext.request.contextPath}/statics/js/index.js"></script>
<script>


    new Vue({
        el: '#app',
        data:{
            pagination: {
                pageNum: 1,  //当前页
                pageSize: 10, //每页显示条数
                total: 0, //总条数
                pages: 0, //总页数
                list: [],//当前页数据集合
            }
        },
        methods: {
            // 分页查询部分
            handleSizeChange(val) {
                // 赋值
                this.pagination.pageSize = val;
                // 查询
                this.onQuerySubmit();
                console.log(`每页 ${val} 条`);
            },
            handleCurrentChange(val) {
                // 赋值
                this.pagination.pageNum = val;
                // 查询
                this.onQuerySubmit();
                console.log(`当前页: ${val}`);
            },
            // 分页查询
            onQuerySubmit() {
                let params = new URLSearchParams();
                params.append('pageNum',this.pagination.pageNum);
                params.append('pageSize', this.pagination.pageSize);
                axios.post("${pageContext.request.contextPath}/course/queryCourses",params).then(response => {
                    if(response.data.code ===1){
                        console.log(response.data)
                        this.pagination = response.data.data;
                    }
                })
            },
            addCourseToUser(id){
                axios.post("${pageContext.request.contextPath}/course/checkToUser").then(res=>{
                    if(res.data.data==="have"){
                        this.$message({
                            type: 'warning',
                            message: '本季度只能选择一项课程!'
                        });
                    }else {
                        this.$confirm('此操作将进行选题, 是否继续?', '提示', {
                            confirmButtonText: '确定',
                            cancelButtonText: '取消',
                            type: 'warning'
                        }).then(() => {
                            // 执行添加
                            let params = new URLSearchParams();
                            params.append('id', id);
                            axios.post("${pageContext.request.contextPath}/course/addcourseToUser",params).then(res=>{
                                if(res.data.code===1){
                                    // 选课成功跳转教练页面
                                    window.location.href = '${pageContext.request.contextPath}/system/jumpCoachIndex'
                                }
                            })
                            this.$message({
                                type: 'success',
                                message: '选择成功!'
                            });
                        }).catch(() => {
                            this.$message({
                                type: 'info',
                                message: '已取消'
                            });
                        });
                    }
                })

            }
        },
        created() {
            this.onQuerySubmit();
        }
    })



</script>
</body>
</html>
